// 可用优惠劵 折扣
<template>
  <div class="container">
    <h4>可用优惠券/折扣</h4>
    <div class="content">
      <p>此处仅显示可用优惠券，您可以查看
        <i @click="jumpCoupon">全部优惠券</i>了解优惠券使用规则
      </p>

      <el-row align="middle">
        <el-col :span="3">
          <label>输入优惠券兑换码</label>
        </el-col>
        <el-col :span="6">
          <el-input size="mini"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button size="mini" @click="exchange" type="primary">兑换</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "coupon",

  methods: {
    // 跳转到优惠券页面
    jumpCoupon() {
      this.$router.push({
        name: "myOrder",
        params: {
          id: 2
        }
      })
    },

    exchange() {
      console.log("点击了兑换按钮")
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: auto;
  color: #4d4d4d;
  h4 {
    line-height: 50px;
  }
  .content {
    width: 97.2%;
    padding: 16px;
    border: 1px #f3f3f3 dashed;
    p {
      color: #828282;
      font-size: 12px;
      line-height: 24px;
      i {
        color: #0078ff;
        cursor: pointer;
      }
    }
    .el-row {
      padding-top: 10px;
      label {
        line-height: 27px;
        font-size: 12px;
        color: #4d4d4d;
      }
    }
  }
}
</style>
